<template>
  <div class="header">
    <div class="slogan">
      全民健康网-人人为我、我为人人的健康知识宣传、分享和创作公益平台，服务健康中国战略
    </div>
    <div class="headBar">
      <div class="logo" @click="clickLogo">
        <img src="../assets/images/logo.jpg" />
        <span class="siteName">全民健康网</span>
      </div>
      <div class="search">
        <input
          type="text"
          class="searchInput"
          placeholder="搜索"
          v-model="searchInput"
        />
        <span class="iconfont searchBtn" @click="goOutcome">&#xe60a;</span>
        <span class="searchKeyword">热门搜索关键词：</span>
      </div>
      <div class="keyword">
        <span class="keyword-content1 keyword-content" @click="goHotcome('新冠肺炎防治')">新冠肺炎防治</span>
        <span class="keyword-content2 keyword-content" @click="goHotcome('咳嗽怎么办')">咳嗽怎么办</span>
        <span class="keyword-content3 keyword-content" @click="goHotcome('疫情怎么防控')">疫情怎么防控</span>
      </div>
      <div class="login" v-show="!isLogin">
        <el-button type="text" @click="showDialogLogin" class="login-text">
          登录
        </el-button>
        <el-button
          type="text"
          @click="dialogRegisterFormVisible = true"
          class="login-text"
        >
          注册
        </el-button>
      </div>
      <div class="personal-center" v-show="isLogin">
        <span @click="goPersonalCenter" class="personal-center-link">
          个人中心
        </span>
        <span class="exit-login" @click="logout">退出登录</span>
      </div>
      <!-- 密码登录 -->
      <el-dialog
        title="登录"
        :visible.sync="dialogLoginFormVisible"
        width="450px"
        custom-class="dialog-login"
        @close="resetForm('loginForm')"
      >
        <el-form :model="loginForm" ref="loginForm" :rules="rules">
          <el-form-item prop="loginName">
            <el-input
              v-model="loginForm.loginName"
              autocomplete="off"
              placeholder="用户名/邮箱/手机号"
              class="dialog-input"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="loginPassword">
            <el-input
              v-model="loginForm.loginPassword"
              autocomplete="off"
              placeholder="密码"
              class="dialog-input-password"
              type="password"
              v-show="!showPassLogin"
            >
            </el-input>
            <el-input
              v-model="loginForm.loginPassword"
              autocomplete="off"
              placeholder="密码"
              class="dialog-input-password"
              type="text"
              v-show="showPassLogin"
            >
            </el-input>
            <div @click="showPassLogin = !showPassLogin" class="eye">
              <span v-show="showPassLogin" class="iconfont icon-eye"
              >&#xeb46;</span
              >
              <span v-show="!showPassLogin" class="iconfont icon-eye"
              >&#xeb45;</span
              >
            </div>
          </el-form-item>
          <el-form-item prop="imageVerification">
            <el-input
              v-model="loginForm.imageVerification"
              autocomplete="off"
              placeholder="验证码"
              class="dialog-input-code"
            >
            </el-input>
            <img class="dialog-input-img" :src="loginCode" @click="changeImg" />
          </el-form-item>
          <el-form-item prop="rememberLogin">
            <div class="dialog-login-remember">
              <el-checkbox v-model="loginForm.rememberLogin"
              >记住登录</el-checkbox
              >
              <span>
                <span class="dialog-message-login" @click="goMessageLogin"
                >短信登录</span
                >
                <nuxt-link
                  to="./forgetPassword"
                  target="_blank"
                  class="dialog-forget-passowrd"
                >
                  忘记密码
                </nuxt-link>
              </span>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="dialog-login-button">
              <el-button
                type="primary"
                @click="login('loginForm')"
                class="dialog-login-submit green-button"
              >
                登录
              </el-button>
              <span class="no-account">
                <span>没有账号？</span>
                <span class="dialog-login-register" @click="goRegister"
                >立即注册</span
                >
              </span>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 短信验证码登录 -->
      <el-dialog
        title="登录"
        :visible.sync="dialogLogin2FormVisible"
        width="450px"
        custom-class="dialog-login"
        @close="resetForm('loginForm2')"
      >
        <el-form :model="loginForm2" ref="loginForm2" :rules="rules">
          <el-form-item prop="phoneNumber">
            <el-input
              v-model="loginForm2.phoneNumber"
              autocomplete="off"
              placeholder="手机号"
              class="dialog-input"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="messageVerification">
            <el-input
              v-model="loginForm2.messageVerification"
              autocomplete="off"
              placeholder="短信验证码"
              class="dialog-verification"
            ></el-input>
            <el-button
              type="primary"
              class="dialog-verification-button green-button"
              @click="getCode(1)"
              :disabled="getCodeBtnDisable"
              :class="{ 'disabled-style': getCodeBtnDisable }"
            >
              {{ btnGetMsgCode }}
            </el-button>
          </el-form-item>
          <el-form-item prop="rememberLogin">
            <div class="dialog-login-remember" style="justifycontent: right">
              <span>
                <span class="dialog-message-login" @click="goPasswordLogin"
                >密码登录</span
                >
              </span>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="dialog-login-button">
              <el-button
                type="primary"
                @click="login2('loginForm2')"
                class="dialog-login-submit green-button"
              >
                登录
              </el-button>
              <span class="no-account">
                <span>没有账号？</span>
                <span class="dialog-login-register" @click="goRegister2"
                >立即注册</span
                >
              </span>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 注册 -->
      <el-dialog
        title="注册"
        :visible.sync="dialogRegisterFormVisible"
        class="dialog-register"
        width="450px"
        @close="resetForm('registerForm')"
      >
        <el-form :model="registerForm" :rules="rules" ref="registerForm">
          <el-form-item prop="registerName">
            <el-input
              v-model="registerForm.registerName"
              autocomplete="off"
              placeholder="手机号"
              class="dialog-input-register"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="identifying">
            <el-input
              v-model="registerForm.identifying"
              autocomplete="off"
              placeholder="验证码"
              class="dialog-verification"
            ></el-input>
            <el-button
              type="primary"
              class="dialog-verification-button green-button"
              @click="getCode(2)"
              :disabled="getCodeBtnDisable2"
              :class="{ 'disabled-style': getCodeBtnDisable2 }"
            >
              {{ btnGetMsgCode2 }}
            </el-button>
          </el-form-item>
          <el-form-item prop="registerPassword">
            <el-input
              v-model="registerForm.registerPassword"
              autocomplete="off"
              placeholder="密码"
              class="dialog-input-password"
              type="password"
              v-show="!showPass"
            >
            </el-input>
            <el-input
              v-model="registerForm.registerPassword"
              autocomplete="off"
              placeholder="密码"
              class="dialog-input-password"
              type="text"
              v-show="showPass"
            >
            </el-input>
            <div @click="showPass = !showPass" class="eye">
              <span v-show="showPass" class="iconfont icon-eye">&#xeb46;</span>
              <span v-show="!showPass" class="iconfont icon-eye">&#xeb45;</span>
            </div>
          </el-form-item>
          <el-form-item prop="againPassword">
            <el-input
              v-model="registerForm.againPassword"
              autocomplete="off"
              placeholder="确认密码"
              class="dialog-input-password"
              type="password"
              v-show="!showPassAgain"
            >
            </el-input>
            <el-input
              v-model="registerForm.againPassword"
              autocomplete="off"
              placeholder="确认密码"
              class="dialog-input-password"
              type="text"
              v-show="showPassAgain"
            >
            </el-input>
            <div @click="showPassAgain = !showPassAgain" class="eye">
              <span v-show="showPassAgain" class="iconfont icon-eye"
              >&#xeb46;</span
              >
              <span v-show="!showPassAgain" class="iconfont icon-eye"
              >&#xeb45;</span
              >
            </div>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="registerForm.agree" style="margintop: 10px">
              我已看过并同意
            </el-checkbox>
            <a class="dialog-agreement">《健康网XXX》</a>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="register('registerForm')"
              class="dialog-register-submit green-button"
            >
              注册
            </el-button>
          </el-form-item>
        </el-form>
        <div>
          已有账号，请<span class="dialog-register-login" @click="goLogin"
        >登录</span
        >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { message } from "element-ui";
import CryptoJS from "crypto-js";
import { randomRange } from "@/utils/tools.js";
// import { encrypt, decrypt } from "@/utils/jsencrypt.js";
export default {
  name: "Header",
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      searchInput: "", //搜索输入的内容
      loginCode: "",
      loginUuid: "", //服务器返回的唯一标识（登录）
      reigisterUuid: "", //服务器返回的唯一标识（注册）
      isLogin: false, //是否登录
      showPassLogin: false, //是否显示密码（登录中）
      showPass: false, //是否显示密码（注册中）
      showPassAgain: false, //是否显示再次输入密码（注册中）
      btnGetMsgCode: "获取短信验证码", //登录的
      btnGetMsgCode2: "获取短信验证码", //注册的
      waitTime: 61, // 获取验证码按钮失效时间（登录）
      waitTime2: 61, // 获取验证码按钮失效时间（注册）
      dialogLoginFormVisible: false,
      dialogLogin2FormVisible: false,
      dialogRegisterFormVisible: false,
      loginForm: {
        loginName: "",
        loginPassword: "",
        imageVerification: "",
        rememberLogin: false,
      },
      loginForm2: {
        phoneNumber: "",
        messageVerification: "",
      },
      registerForm: {
        registerName: "",
        identifying: "",
        registerPassword: "",
        againPassword: "",
        agree: false,
      },
      rules: {
        //注册输入的手机号
        registerName: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        //短信登录输入的手机号
        phoneNumber: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        //注册输入的密码
        registerPassword: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            pattern: /^[0-9a-zA-Z]{4,20}$/,
            message: "密码必须为4到20位的字母或者数字",
            trigger: "blur",
          },
        ],
        //注册再次输入密码
        againPassword: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            pattern: /^[0-9a-zA-Z]{4,20}$/,
            message: "密码必须为4到20位的字母或者数字",
            trigger: "blur",
          },
        ],
        identifying: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur",
          },
        ],
        messageVerification: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur",
          },
        ],
        imageVerification: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur",
          },
        ],
        loginName: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
        ],
        loginPassword: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
        ],
        agree: [
          {
            required: true,
            cheked: true,
            message: "请阅读并勾选协议",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    // 用于校验手机号码格式是否正确（登录）
    phoneNumberStyle() {
      let reg = /^1[3456789]\d{9}$/;
      if (!reg.test(this.loginForm2.phoneNumber)) {
        return false;
      }
      return true;
    },
    // 用于校验手机号码格式是否正确（注册）
    phoneNumberStyle2() {
      let reg = /^1[3456789]\d{9}$/;
      if (!reg.test(this.registerForm.registerName)) {
        return false;
      }
      return true;
    },
    // 登录：控制获取验证码按钮是否可点击
    getCodeBtnDisable: {
      get() {
        if (this.waitTime == 61) {
          if (this.loginForm2.phoneNumber) {
            return false;
          }
          return true;
        }
        return true;
      },
      // 注意：因为计算属性本身没有set方法，不支持在方法中进行修改，而下面我要进行这个操作，所以需要手动添加
      set() {},
    },
    // 注册：控制获取验证码按钮是否可点击
    getCodeBtnDisable2: {
      get() {
        if (this.waitTime2 == 61) {
          if (this.registerForm.registerName) {
            return false;
          }
          return true;
        }
        return true;
      },
      // 注意：因为计算属性本身没有set方法，不支持在方法中进行修改，而下面我要进行这个操作，所以需要手动添加
      set() {},
    },
  },
  methods: {
    //点击logo，新标签打开首页
    async clickLogo() {
      let link = this.$router.resolve({
        path: "/home",
      });
      window.open(link.href, "_blank");
    },
    //去往查询结果
    goOutcome() {
      let link = this.$router.resolve({
        path: "/searchoutcome",
        query: { searchKey: this.searchInput },
      });
      this.searchInput = "";
      window.open(link.href, "_blank");
    },
    goHotcome(keyword) {
      let link = this.$router.resolve({
        path: "/searchoutcome",
        query: { searchKey: keyword },
      });
      window.open(link.href, "_blank");
    },
    //去往个人中心
    async goPersonalCenter() {
      if (this.$cookies.get(this.$api.TOKENKEY)) {
        let link = this.$router.resolve({
          path: "/personalCenter",
        });
        window.open(link.href, "_blank");
      } else {
        message({
          message: "未登录或者登录状态已过期，清重新登录",
          type: "error",
          duration: 1000,
        });
      }
    },
    //base64转blob
    base64ToBlob(urlData, type) {
      let arr = urlData.split(",");
      let mime = arr[0].match(/:(.*?);/)[1] || type;
      // 去掉url的头，并转化为byte
      let bytes = window.atob(arr[1]);
      // 处理异常,将ascii码小于0的转换为大于0
      let ab = new ArrayBuffer(bytes.length);
      // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
      let ia = new Uint8Array(ab);
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ab], {
        type: mime,
      });
    },
    //blob转url
    blobToUrl(blob_data) {
      return URL.createObjectURL(blob_data);
    },
    //获取新的图片验证码
    async changeImg() {
      let res = await this.$api.reqCaptchaImage({});
      let baseUrl = "data:image/png;base64," + res.img;
      this.loginUuid = res.uuid;
      // let baseUrl =
      //   "";
      let blob = this.base64ToBlob(baseUrl, "image/png");
      window.URL = window.URL || window.webkitURL; //blob对象转为blob-url
      // let url=window.URL.createObjectURL(blob)
      let url = this.blobToUrl(blob);
      this.loginCode = url;
    },
    //打开登录弹窗（密码登录）
    async showDialogLogin() {
      this.dialogLoginFormVisible = true;
      //获取本地存储
      if (this.$cookies.get("rememberUser")) {
        let loginNameBytes = CryptoJS.AES.decrypt(
          this.$cookies.get("loginName"),
          "secretkey"
        );
        let loginName = loginNameBytes.toString(CryptoJS.enc.Utf8);
        this.loginForm.loginName = loginName;
        // this.loginForm.loginPassword = this.$cookies.get("loginPassword");
        let loginPasswordBytes = CryptoJS.AES.decrypt(
          this.$cookies.get("loginPassword"),
          "secretkey"
        );
        let loginPassword = loginPasswordBytes.toString(CryptoJS.enc.Utf8);
        this.loginForm.loginPassword = loginPassword;
        this.loginForm.rememberLogin = true;
      }
      // if (this.$cookies.get("loginName")) {
      //   //第一个参数是要解密的值，第二个参数是解密密钥（与加密密钥保持一致）
      //   // this.loginForm.loginName = this.$cookies.get("loginName");
      //   let loginNameBytes = CryptoJS.AES.decrypt(
      //     this.$cookies.get("loginName"),
      //     "secretkey"
      //   );
      //   let loginName = loginNameBytes.toString(CryptoJS.enc.Utf8);
      //   this.loginForm.loginName = loginName;
      //   // this.loginForm.loginPassword = this.$cookies.get("loginPassword");
      //   let loginPasswordBytes = CryptoJS.AES.decrypt(
      //     this.$cookies.get("loginPassword"),
      //     "secretkey"
      //   );
      //   let loginPassword = loginPasswordBytes.toString(CryptoJS.enc.Utf8);
      //   this.loginForm.loginPassword = loginPassword;
      //   this.loginForm.rememberLogin = true;
      // }
      //获取验证码
      this.changeImg();
    },
    //密码登录去往注册
    goRegister() {
      this.dialogLoginFormVisible = false;
      this.dialogRegisterFormVisible = true;
    },
    //短信验证码去往注册
    goRegister2() {
      this.dialogLogin2FormVisible = false;
      this.dialogRegisterFormVisible = true;
    },
    //获取短信验证码
    async getCode(num) {
      if (this.phoneNumberStyle || this.phoneNumberStyle2) {
        // 调用获取短信验证码接口
        let res;
        if (num === 1) {
          //登录请求验证码
          res = await this.$api.reqPhoneCode({
            mobile: this.loginForm2.phoneNumber,
          });
          if (res.code === 200) {
            this.loginUuid = res.uuid;
          }
          let that = this;
          that.waitTime--;
          that.getCodeBtnDisable = true;
          this.btnGetMsgCode = `${this.waitTime}s 后重新获取`;
          let timer = setInterval(function () {
            if (that.waitTime > 1) {
              that.waitTime--;
              that.btnGetMsgCode = `${that.waitTime}s 后重新获取`;
            } else {
              clearInterval(timer);
              that.btnGetMsgCode = "获取短信验证码";
              that.getCodeBtnDisable = false;
              that.waitTime = 61;
            }
          }, 1000);
        } else {
          //注册请求验证码
          res = await this.$api.reqPhoneCode({
            mobile: this.registerForm.registerName,
          });
          console.log(res);
          if (res.code === 200) {
            this.loginUuid = res.uuid;
          }
          let that = this;
          that.waitTime2--;
          that.getCodeBtnDisable2 = true;
          this.btnGetMsgCode2 = `${this.waitTime2}s 后重新获取`;
          let timer = setInterval(function () {
            if (that.waitTime2 > 1) {
              that.waitTime2--;
              that.btnGetMsgCode2 = `${that.waitTime2}s 后重新获取`;
            } else {
              clearInterval(timer);
              that.btnGetMsgCode2 = "获取短信验证码";
              that.getCodeBtnDisable2 = false;
              that.waitTime2 = 61;
            }
          }, 1000);
        }
      }
    },
    //去往密码登录
    goLogin() {
      this.dialogLoginFormVisible = true;
      this.dialogRegisterFormVisible = false;
    },
    //去往短信登录
    goMessageLogin() {
      this.dialogLoginFormVisible = false;
      this.dialogLogin2FormVisible = true;
    },
    //去往密码登录
    goPasswordLogin() {
      this.dialogLogin2FormVisible = false;
      this.dialogLoginFormVisible = true;
    },
    //注册
    // TODO:有问题，重复不识别，修改的到底是nickname还是username
    async register(formName) {
      console.log(this.registerForm.agree);
      let ifSend = false;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
            this.registerForm.registerPassword ===
            this.registerForm.againPassword
          ) {
            if (this.registerForm.agree) {
              ifSend = true; //允许发送请求
            } else {
              this.$message({
                type: "error",
                message: "请阅读并勾选协议",
              });
            }
          } else {
            this.$message({
              type: "error",
              message: "两次密码输入不相同，请重新输入",
            });
          }
        } else {
          return false;
        }
      });
      if (ifSend) {
        let randomName = randomRange(0, 10);
        console.log("手机号：" + this.registerForm.registerName);
        let registerData = await this.$api.register({
          password: this.registerForm.registerPassword,
          phoneNumber: this.registerForm.registerName,
          smsCode: this.registerForm.identifying,
          username: "用户" + randomName,
          uuid: this.loginUuid,
        });
        console.log(registerData);
        if (registerData.code == 200) {
          Message({
            message: "注册成功",
            type: "success",
            duration: 1000,
          });
          console.log("注册成功");
          console.log(registerData);
          this.dialogRegisterFormVisible = false;
        }
      }
    },
    //密码登录
    async login(formName) {
      let ifSend = false;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ifSend = true; //允许发送请求
        } else {
          return false;
        }
      });
      if (ifSend) {
        // this.dialogLoginFormVisible = false;
        let loginData = await this.$api.login({
          code: this.loginForm.imageVerification,
          password: this.loginForm.loginPassword,
          username: this.loginForm.loginName,
          uuid: this.loginUuid,
        });
        if (loginData.code == 200) {
          this.$cookies.set(this.$api.TOKENKEY, loginData.token);
          this.isLogin = true;
          this.$store.commit("user/SET_LOGIN", true);
          //添加用户信息
          let userRes = await this.$api.reqUserInfo({});
          if (userRes.code === 200) {
            this.$store.commit(
              "user/SET_AVATAR",
              this.$api.BASEURL + userRes.user.avatar
            );
          }

          this.$store.commit("user/SET_USERID", userRes.user.userId);
          this.$store.commit("user/SET_USERNAME", userRes.user.userName);
          if (this.loginForm.rememberLogin) {
            this.$cookies.set("rememberUser", true);
            //第一个参数是要存储的值，第二个参数是密钥
            let loginName = CryptoJS.AES.encrypt(
              this.loginForm.loginName,
              "secretkey"
            ).toString();
            let loginPassword = CryptoJS.AES.encrypt(
              this.loginForm.loginPassword,
              "secretkey"
            ).toString();
            // let passwordtest=encrypt(this.loginForm.loginName)
            // this.$cookies.set("loginName", this.loginForm.loginName);
            this.$cookies.set("loginName", loginName);
            // this.$cookies.set("passwordtest", passwordtest);
            // this.$cookies.set("loginPassword", this.loginForm.loginPassword);
            this.$cookies.set("loginPassword", loginPassword);
          } else {
            if (this.cookies.get("rememverUser")) {
              this.$cookies.remove("loginName");
              this.$cookies.remove("loginPassword");
            }
            // if (this.$cookies.get("loginName")) {
            //   this.$cookies.remove("loginName");
            //   this.$cookies.remove("loginPassword");
            // }
          }
          this.dialogLoginFormVisible = false;
        } else {
          this.changeImg();
        }
      }
    },
    //短信验证码登录
    async login2(formName) {
      let ifSend = false;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ifSend = true; //允许发送请求
        } else {
          return false;
        }
      });
      if (ifSend) {
        let loginData = await this.$api.loginSms({
          mobile: this.loginForm2.phoneNumber,
          smsCode: this.loginForm2.messageVerification,
          uuid: this.loginUuid,
        });
        if (loginData.code == 200) {
          this.$cookies.set(this.$api.TOKENKEY, loginData.token);
          this.isLogin = true;
          this.$store.commit("user/SET_LOGIN", true);
          this.dialogLogin2FormVisible = false;
        }
      }
    },
    //登出
    logout() {
      this.$confirm("确定退出登录吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$cookies.remove(this.$api.TOKENKEY);
          this.isLogin = false;
          this.$store.commit("user/SET_LOGIN", false);
          this.$message({
            type: "success",
            message: "成功退出",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
    //清空弹窗数据
    resetForm(formName) {
      this.$nextTick(() => {
        //(mouted加载table数据以后，隐藏的弹出框并没有编译渲染进dom里面),所以在下一次更新后调用
        this.showPass = false;
        this.showPassLogin = false;
        this.showPassAgain = false;
        this.$refs[formName].resetFields();
      });
    },
  },
  mounted() {
    //判断是否登录
    if (this.$cookies.get(this.$api.TOKENKEY)) {
      this.isLogin = true;
    } else {
      this.isLogin = false;
    }
  },
};
</script>

<style scoped lang="less">
.header {
  min-height: 80px;
  vertical-align: center;
  line-height: 100%;
  .slogan {
    font-size: 12px;
    color: @themeColor;
    margin-bottom: 10px;
  }

  .headBar {
    display: -webkit-flex;
    margin-bottom: 10px;
    min-height: 60px;
    vertical-align: center;
    align-items: center;

    .logo {
      display: -webkit-flex;
      float: left;
      margin-left: 20px;
      margin-right: 100px;
      vertical-align: center;
      height: 40px;
      line-height: 40px;
      cursor: pointer;

      img {
        height: 40px;
        width: 40px;
      }

      .siteName {
        font-weight: 700;
      }
    }

    .search {
      position: relative;
      display: -webkit-flex;
      height: 30px;
      width: 450px;
      vertical-align: center;
      .searchInput {
        width: 300px;
        height: 30px;
        background-color: #fff;
        border-radius: 10px;
        outline: none;
        border: 1px solid #c4c7ce;
        box-shadow: 1px 1px 8px 0 #c4c7ce;
        padding-left: 10px;
        position: absolute;
      }

      .searchBtn {
        font-size: 20px;
        color: @themeColor;
        position: absolute;
        top: 5px;
        left: 285px;
        border: none;
        outline: none;
        cursor: pointer;
      }

      .searchKeyword {
        position: absolute;
        left: 330px;
        top: 5px;
        font-size: 13px;
      }
    }
    .keyword {
      width: 350px;
      position: relative;
      .keyword-content {
        position: absolute;
        top: -10px;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        width: 80px;
        white-space: nowrap;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-align: left;
        text-decoration: underline;
        color: #8d9094;
        cursor: pointer;
        &:hover {
          color: @themeColor;
        }
      }
      .keyword-content1 {
        left: 0px;
      }
      .keyword-content2 {
        left: 90px;
      }
      .keyword-content3 {
        left: 180px;
      }
    }
    .login {
      float: right;
      display: -webkit-flex;

      .login-text {
        font-size: 16px;
        margin-left: 10px;
        color: @themeColor;
        cursor: pointer;
      }
    }
    .personal-center {
      float: right;
      display: -webkit-flex;
      .personal-center-link {
        font-size: 16px;
        margin-left: 10px;
        color: @themeColor;
        cursor: pointer;
        text-decoration: none;
      }
      .exit-login {
        font-size: 16px;
        margin-left: 10px;
        color: @themeColor;
        cursor: pointer;
      }
    }
  }
  // /deep/ .el-form-item.is-error .el-input__validateIcon {
  // 	padding-left: 40px;
  // }
  /deep/ .el-form-item__error {
    padding-left: 40px;
  }
  .eye {
    cursor: pointer;
    display: inline-block;
    .icon-eye {
      font-size: 20px;
    }
  }
  .dialog-input {
    width: 330px;
    margin-top: 20px;
  }
  .dialog-input-register {
    width: 330px;
    margin-top: 20px;
  }
  .dialog-input-password {
    width: 305px;
    margin-top: 20px;
  }
  .dialog-input-code {
    width: 250px;
    margin-top: 20px;
  }
  .dialog-input-img {
    display: inline-block;
    width: 80px;
    height: 30px;
    margin-top: 20px;
    vertical-align: top;
    padding-top: 5px;
    cursor: pointer;
  }
  .dialog-verification {
    width: 200px;
    margin-top: 20px;
    margin-right: 0px;
  }
  .dialog-verification-button {
    width: 125px;
    height: 40px;
  }
  //不可点击时的button
  .el-button.disabled-style {
    background-color: #eeeeee;
    color: #cccccc;
  }
  .dialog-login {
    .dialog-login-remember {
      margin-top: 5px;
      display: -webkit-flex;
      justify-content: space-between;
      padding-left: 45px;
      padding-right: 45px;
      .dialog-message-login {
        color: @themeColor;
        margin-right: 5px;
        cursor: pointer;
      }
      .dialog-forget-passowrd {
        text-decoration: none;
        color: @themeColor;
      }
    }
    .dialog-login-button {
      margin-top: 30px;
      margin-bottom: 10px;
      display: -webkit-flex;
      justify-content: space-between;
      padding-left: 45px;
      padding-right: 45px;
      .dialog-login-submit {
        width: 120px;
        height: 40px;
        border-radius: 20px;
        // background-color: #25b6a0 !important;
        // border-color: #25b6a0 !important;
      }
      .dialog-login-register {
        color: @themeColor;
        cursor: pointer;
      }
    }
    .no-account {
      display: flex;
      align-items: center; //垂直居中
    }
  }
  .dialog-register {
    .dialog-agreement {
      text-decoration: none;
      color: @themeColor;
      cursor: pointer;
    }
    .dialog-register-submit {
      height: 40px;
      width: 330px;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .dialog-register-login {
      color: @themeColor;
      margin-left: 5px;
      cursor: pointer;
    }
  }
}
</style>
